
import React, { useState, useEffect } from "react";
import styles from "./projectAnswer.less"
import { Checkbox, Input, Button, Pagination, Modal, Select, Form, Space } from 'antd';
import { Link } from 'umi';
import { DownOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite';
let xx = ""
import useStore from "@/context/useStore";
import { IMyReply, IProjectAnswerParams } from "@/utils/students/projectAnswer";
import { getMyReply } from "@/services/modules/students/projectAnswer";
import classNames from "classnames";
import { addAnswer, getQuestionNameList, } from "@/services";
import { IPracticalProjectList } from "@/utils/questions";

import Editor from 'for-editor';

import { SelectValue } from "antd/lib/select";
const { Option } = Select;
//类型标题
const genre = [{ name: "全部", type: "" },
{ name: "实训", type: "0" },
{ name: "答辩", type: "4" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },
];

//我要提问
const addGenre = [{ name: "实训", type: "0" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },]
const projectAnswers: React.FC = (props) => {
    let { ProjectAnswer } = useStore()
    //弹框内容数据
    let [typeChange1, handleChange1] = useState<any>("")
    let [typeChange2, handleChange2] = useState<any>("")
    const onFinish = (values: any) => {
        //我要提问 >  发布
        const { labels, questionContent, questionTitle, text1, text2, type } = values
        let params = { labels: [labels], questionContent: questionContent, questionTitle: questionTitle, text1: text1, text2: text2, type: type }
        addAnswer(params).then(res => {
            alert(res.msg)
            handleOk()
            ProjectAnswer.getProjectAnswerList(queryParams)
        })
    };

    //我要提问 实训项目下拉菜单
    let [practicalProjectList, setPracticalProjectList] = useState<IPracticalProjectList[]>([])

    useEffect(() => {
        getQuestionNameList().then(res => {
            console.log(res)
            setPracticalProjectList(res.data)
        })
    }, [])
    function handleChange(value: SelectValue) {
        // console.log(`selected ${value}`);
        handleChange2(value)
    }

    //开启我要提问弹框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        ProjectAnswer.getProjectAnswerList(queryParams)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //查看全部内容
    let [lookAll, setLookAll] = useState(true)
    //我要提问 实训项目下拉菜单



    //问答数据列表的默认参数
    let queryParams: IProjectAnswerParams = { isAsc: 'desc', type: '', pageNum: 1, pageSize: 10 };
    useEffect(() => {
        if (ProjectAnswer.curgenre) {
            queryParams = {
                ...queryParams,
                type: ProjectAnswer.curgenre,
                quality: ProjectAnswer.quality,
                authentication: ProjectAnswer.authentication,
                questionTitle: ProjectAnswer.questionTitle,
                pageNum: ProjectAnswer.pageNum
            }
        } else {
            queryParams = {
                ...queryParams,
                type: ProjectAnswer.curgenre,
                quality: ProjectAnswer.quality,
                authentication: ProjectAnswer.authentication,
                questionTitle: ProjectAnswer.questionTitle,
                pageNum: ProjectAnswer.pageNum
            }
        }
        ProjectAnswer.getProjectAnswerList(queryParams)

    }, [ProjectAnswer.curgenre, ProjectAnswer.quality, ProjectAnswer.authentication, ProjectAnswer.questionTitle, ProjectAnswer.pageNum]);
    //我的问答

    let [itemObj, setItemObj] = useState<IMyReply>({} as IMyReply)

    useEffect(() => {
        getMyReply().then(ok => {
            setItemObj(ok.data)
        })
    }, [])
    return (
        <div className={styles.mainBox}>
            <div className={styles.main}>
                <div className={styles.main_title}>
                    问答 / 问答列表
                </div>
                <div className={styles.con}>
                    <div className={styles.main_main_BoxL}>
                        {/* 类型分类 */}
                        <div className={styles.genre}>
                            <span>类型 : </span>
                            {
                                genre.map((item) => {
                                    return <span key={item.type} className={item.type == ProjectAnswer.curgenre ? styles.active : ""}
                                        onClick={(e) => { ProjectAnswer.setCurgenre(item.type) }}
                                    >{item.name}</span>
                                })
                            }
                        </div>
                        {/* 模糊搜索   仅看精品  教师认证*/}
                        <li className={styles.con_title}>
                            <div>
                                <Checkbox onChange={(e) => { ProjectAnswer.setQuality(e.target.checked) }}>仅看精品</Checkbox>
                                <Checkbox onChange={(e) => { ProjectAnswer.setAuthentication(e.target.checked) }}>仅看教师认证答案</Checkbox>
                                <Input placeholder="搜索岗位"
                                    suffix={<SearchOutlined onClick={() => { ProjectAnswer.setQuestionTitle(ProjectAnswer.title) }} />}
                                    onChange={e => ProjectAnswer.setTitle(e.target.value)} onKeyDown={e => {
                                        if (e.keyCode === 13) {
                                            ProjectAnswer.setQuestionTitle(ProjectAnswer.title)
                                        }
                                    }} />
                                {/* 我要提问弹框弹框 */}
                                <Modal title="提问" className={styles.ant_modal}
                                    visible={isModalVisible}
                                    onOk={handleOk}
                                    onCancel={handleCancel}
                                    footer={null}
                                    bodyStyle={{ width: 830 }}
                                    width={830}>
                                    <div className={styles.form_box}>
                                        <Form
                                            name="basic"
                                            initialValues={{ remember: true }}
                                            onFinish={onFinish}>

                                            <Form.Item className={styles.wentiName}>
                                                <div>标题</div>
                                                <Space className={styles.wentiName_space}>
                                                    <Form.Item
                                                        name="questionTitle"
                                                        noStyle
                                                        rules={[{ required: true, message: 'Please input your questionTitle!' }]}
                                                        className={styles.wentiName_space_item}
                                                    >
                                                        <Input style={{ width: 160 }} placeholder="请输入问题名称" />
                                                    </Form.Item>
                                                </Space>
                                            </Form.Item>
                                            <Form.Item >
                                                <Input.Group compact>
                                                    <Form.Item style={{ marginRight: 20 }}
                                                        name="type"
                                                        noStyle
                                                        rules={[{ required: true, message: 'Province is required' }]}
                                                    >
                                                        <Select placeholder="请选择问题类型" style={{ width: 120 }} onChange={(e) => { handleChange1(e) }} >
                                                            {
                                                                addGenre.map((item) => {
                                                                    return <Option value={item.type} key={item.type}>{item.name}</Option>
                                                                })
                                                            }
                                                        </Select>
                                                    </Form.Item>
                                                    {
                                                        typeChange1 === "0" ? <div>
                                                            <Form.Item
                                                                name="text1"
                                                                noStyle
                                                                rules={[{ required: true, message: 'Street is required' }]}
                                                            >
                                                                <Select placeholder="请选择项目" style={{ width: 120 }} onChange={(e) => {
                                                                    handleChange(e)
                                                                    console.log(e)
                                                                }}>
                                                                    {
                                                                        typeChange1 === "0" ? practicalProjectList.map((item) => {
                                                                            return <Option value={item.value} key={item.value}>{item.name}</Option>
                                                                        }) : null
                                                                    }
                                                                </Select>
                                                            </Form.Item>
                                                            <Form.Item
                                                                name="text2"
                                                                noStyle
                                                                rules={[{ required: true, message: 'Street is required' }]}
                                                            >
                                                                <Select placeholder="请选择任务" style={{ width: 120 }} >
                                                                    {/* {
                                practicalProjectList.map((item) => {
                                    return <Option value={item.value} key={item.value}>{item.name}</Option>
                                })
                            } */}
                                                                </Select>
                                                            </Form.Item>
                                                        </div> : <div>
                                                            {
                                                                typeChange1 === "1" ? <div>
                                                                    <Form.Item style={{ marginBottom: 0 }}>
                                                                        <Form.Item
                                                                            name="text1"
                                                                            rules={[{ required: true }]}
                                                                            style={{ display: 'inline-block', width: 120 }}
                                                                        >
                                                                            <Input placeholder="公司" />
                                                                        </Form.Item>
                                                                        <Form.Item
                                                                            name="text2"
                                                                            rules={[{ required: true }]}
                                                                            style={{ display: 'inline-block', width: 120 }}
                                                                        >
                                                                            <Input placeholder="岗位" />
                                                                        </Form.Item>
                                                                    </Form.Item>
                                                                </div> : <div>
                                                                    {
                                                                        typeChange1 === "2" ? <div>
                                                                            <Form.Item style={{ marginBottom: 0 }}>
                                                                                <Form.Item
                                                                                    name="text1"
                                                                                    rules={[{ required: true }]}
                                                                                    style={{ display: 'inline-block', width: 120 }}
                                                                                >
                                                                                    <Input placeholder="工作" />
                                                                                </Form.Item>
                                                                            </Form.Item>
                                                                        </div> : <div>
                                                                            {
                                                                                typeChange1 === "3" ? <div>
                                                                                    <Form.Item style={{ marginBottom: 0 }}>
                                                                                        <Form.Item
                                                                                            name="text1"
                                                                                            rules={[{ required: true }]}
                                                                                            style={{ display: 'inline-block', width: 120 }}
                                                                                        >
                                                                                            <Input placeholder="其他" />
                                                                                        </Form.Item>
                                                                                    </Form.Item></div> : <div>
                                                                                    <Form.Item
                                                                                        name="text1"
                                                                                        noStyle
                                                                                        rules={[{ required: true, message: '请选择项目' }]}
                                                                                    >
                                                                                        <Select placeholder="请选择项目" style={{ width: 120 }} onChange={(e) => { handleChange(e) }}>
                                                                                        </Select>
                                                                                    </Form.Item>
                                                                                    <Form.Item
                                                                                        name="text2"
                                                                                        noStyle
                                                                                        rules={[{ required: true, message: '请选择任务' }]}>
                                                                                        <Select placeholder="请选择任务" style={{ width: 120 }} >

                                                                                        </Select>
                                                                                    </Form.Item>
                                                                                </div>
                                                                            }
                                                                        </div>
                                                                    }
                                                                </div>
                                                            }
                                                        </div>
                                                    }
                                                </Input.Group>
                                            </Form.Item>
                                            <div className={styles.questionContentBox}>
                                                <div>描述</div>
                                                <Form.Item style={{ marginBottom: 0 }}>
                                                    <Form.Item
                                                        name="questionContent"
                                                    >
                                                        <Editor placeholder="开始编辑..."
                                                            style={{ height: 300 }}
                                                            onChange={(value) => {
                                                                console.log(value);
                                                            }} />
                                                    </Form.Item>
                                                </Form.Item>
                                            </div>
                                            <div className={styles.tag}>
                                                <div>标签</div>
                                                <Form.Item
                                                    name="labels"
                                                    noStyle
                                                    rules={[{ required: true, message: 'Please input your tag!' }]}
                                                >
                                                    <Input style={{ width: 600 }} placeholder="标签" />
                                                </Form.Item>
                                            </div>
                                            <div className={styles.fb}>

                                                <Form.Item label=" " colon={false}>
                                                    <Button type="primary" htmlType="submit">发布</Button>
                                                </Form.Item>
                                            </div>
                                        </Form>
                                    </div>
                                </Modal>
                            </div>
                        </li>
                        <ul className={styles.uls}>
                            {
                                ProjectAnswer.ProjectAnswerList.map((item) => {
                                    return <div className={styles.divs} key={item.answerId}>
                                        {/* 左侧盒子 */}
                                        <div className={styles.divsBoxL}>
                                            {/* 标题 评论消息  实训类型 */}
                                            <div className={styles.divs_top}>
                                                <div className={styles.divs_top_left}>
                                                    <span>{item.qUserName}</span>
                                                    <span>{item.replyTime}</span>
                                                    <span>实训类型:{genre.map(item1 => {
                                                        if (item1.type == item.typeNum) {
                                                            return <span className={styles.typeNum} key={item1.type}>{item1.name}</span>
                                                        }
                                                    })}</span>
                                                </div>
                                                <div className={styles.divs_top_right}>
                                                    <img src={xx} alt="" /><span>{item.answerCount}</span>
                                                </div>
                                            </div>
                                            {/* 标题内容 */}
                                            <div className={styles.divs_con}>
                                                <div className={styles.divs_question_title}>
                                                    <span>{item.quality ? <img src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" alt="" /> : ""}</span>
                                                    <span>{item.authentication ? <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /> : ""}</span>
                                                    <span>{item.questionTitle}</span>
                                                </div>
                                                <div className={styles.divs_con_children}>
                                                    <div className={lookAll ? styles.questionContentActive : styles.questionContent}>
                                                        {item.questionContent}
                                                    </div>
                                                    <div className={styles.lookAll}><span onClick={() => {
                                                        setLookAll(lookAll ? false : true)
                                                    }}>查看全部</span><DownOutlined /></div>
                                                </div>
                                            </div>
                                            {/* 标题标签 */}
                                            <div className={styles.divs_comment}>{item.labels.map((item1, index1) => {
                                                return <span key={index1}>{item1}</span>
                                            })}</div>
                                        </div>
                                        <div className={styles.divsBoxR}>
                                            <Button><Link to={`/students/answerDetail?answerId=${item.answerId}`}>回答</Link></Button>
                                        </div>
                                    </div>
                                })
                            }
                            {/* 分页盒子 */}
                            <div className={styles.page}>
                                <Pagination
                                    defaultCurrent={1}
                                    onChange={(e) => { ProjectAnswer.setPAgeNum(e) }}
                                    total={ProjectAnswer.ProjectAnswerListLen} size="default"
                                    showSizeChanger showQuickJumper pageSize={10} pageSizeOptions={["10"]} />
                            </div>
                        </ul>
                    </div>
                    <div className={styles.main_main_BoxR}>
                        {/* 我要提问 */}
                        <div>
                            <div onClick={showModal}> <PlusOutlined />我要提问</div>
                        </div>
                        {/* 我的回答 */}
                        <div>
                            <div>
                                <h1>
                                    我的问答
                                </h1>
                                <div>
                                    <img src="" alt="" /><span></span>
                                </div>
                                <div>
                                    <div className={classNames(styles.wen, styles.wenda)}>问</div>
                                    <div>
                                        提问了
                                        <span className={styles.num}>{itemObj.numberQuestions}</span>
                                        个问题
                                        <span className={styles.num}>{itemObj.numberReplies}</span>个人进行了回答
                                    </div>
                                </div>
                                <div>
                                    <div className={classNames(styles.da, styles.wenda)}>答</div>
                                    <div>回答了<span className={styles.num}>{itemObj.replyCount}</span>个问题</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    )
}
export default observer(projectAnswers)
